@material/textfield

Text Field

Text fields allow users to input, edit, and select text.

Design & API Documentation

• Material Design guidelines: Text Fields
• Demo

Installation

npm install @material/textfield

Basic Usage

HTML Structure

<label class="mdc-text-field">
  <span class="mdc-text-field__ripple"></span>
  <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id">
  <span class="mdc-floating-label" id="my-label-id">Hint text</span>
  <span class="mdc-line-ripple"></span>
</label>

NOTE: For more details, see MDC Line Ripple and MDC Floating Label.

Styles

@use "@material/textfield/mdc-text-field";

JavaScript Instantiation

import {MDCTextField} from '@material/textfield';

const textField = new MDCTextField(document.querySelector('.mdc-text-field'));

See Importing the JS component for more information on how to import JavaScript.

Variants

Full Width

Full width text fields are useful for in-depth tasks or entering complex information.

<label class="mdc-text-field mdc-text-field--fullwidth">
  <span class="mdc-text-field__ripple"></span>
  <input class="mdc-text-field__input"
         type="text"
         placeholder="Full-Width Text Field"
         aria-label="Full-Width Text Field">
  <span class="mdc-line-ripple"></span>
</label>

NOTE: Do not use mdc-text-field--outlined to style a full width text field.

NOTE: Do not use mdc-floating-label within mdc-text-field--fullwidth. Labels should not be included as part of the DOM structure of a full width text field.

Textarea

<label class="mdc-text-field mdc-text-field--textarea">
  <textarea class="mdc-text-field__input" aria-labelledby="my-label-id" rows="8" cols="40"></textarea>
  <span class="mdc-notched-outline">
    <span class="mdc-notched-outline__leading"></span>
    <span class="mdc-notched-outline__notch">
      <label class="mdc-floating-label" id="my-label-id">Textarea Label</label>
    </span>
    <span class="mdc-notched-outline__trailing"></span>
  </span>
</label>

Outlined

<label class="mdc-text-field mdc-text-field--outlined">
  <input type="text" class="mdc-text-field__input" aria-labelledby="my-label-id">
  <span class="mdc-notched-outline">
    <span class="mdc-notched-outline__leading"></span>
    <span class="mdc-notched-outline__notch">
      <span class="mdc-floating-label" id="my-label-id">Your Name</span>
    </span>
    <span class="mdc-notched-outline__trailing"></span>
  </span>
</label>

See here for more information on using the notched outline sub-component.

NOTE: Do not use mdc-line-ripple inside of mdc-text-field if you plan on using mdc-text-field--outlined. Line Ripple should not be included as part of the DOM structure of an outlined text field.

Disabled

To disable the text field, add the disabled attribute to the <input> element and add the mdc-text-field--disabled class to the mdc-text-field element.

<label class="mdc-text-field mdc-text-field--disabled">
  <span class="mdc-text-field__ripple"></span>
  <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id" disabled>
  <span class="mdc-floating-label" id="my-label-id">Disabled text field</span>
  <span class="mdc-line-ripple"></span>
</label>

Text Field without label

A text field doesn’t require a label if a separate but clear label indicator is already displayed adjacent to the text field. Add class name mdc-text-field--no-label and remove the label element from the structure.

Filled

<label class="mdc-text-field mdc-text-field--no-label">
  <span class="mdc-text-field__ripple"></span>
  <input class="mdc-text-field__input" type="text" placeholder="Placeholder text" aria-label="Label">
  <span class="mdc-line-ripple"></span>
</label>

Outlined

<label class="mdc-text-field mdc-text-field--outlined mdc-text-field--no-label">
  <input class="mdc-text-field__input" type="text" aria-label="Label">
  <span class="mdc-notched-outline">
    <span class="mdc-notched-outline__leading"></span>
    <span class="mdc-notched-outline__trailing"></span>
  </span>
</label>

Textarea

<label class="mdc-text-field mdc-text-field--textarea mdc-text-field--no-label">
  <textarea class="mdc-text-field__input" rows="8" cols="40" aria-label="Label"></textarea>
  <span class="mdc-notched-outline">
    <span class="mdc-notched-outline__leading"></span>
    <span class="mdc-notched-outline__trailing"></span>
  </span>
</label>

Text Field with Helper Text

The helper text provides supplemental information and/or validation messages to users. It appears on input field focus and disappears on input field blur by default, or it can be persistent. Helper text should be rendered inside .mdc-text-field-helper-line element which is immediate sibling of .mdc-text-field. See here for more information on using helper text.

<label class="mdc-text-field">
  <span class="mdc-text-field__ripple"></span>
  <input class="mdc-text-field__input" type="text"
         aria-labelledby="my-label-id"
         aria-controls="my-helper-id"
         aria-describedby="my-helper-id">
  <span class="mdc-floating-label" id="my-label-id">My Label</span>
  <span class="mdc-line-ripple"></span>
</label>
<div class="mdc-text-field-helper-line">
  <div class="mdc-text-field-helper-text" id="my-helper-id" aria-hidden="true">helper text</div>
</div>

Text Field with Character Counter

Character counter is used if there is a character limit. It displays the ratio of characters used and the total character limit. Character counter should be rendered inside .mdc-text-field-helper-line element which is immediate sibling of .mdc-text-field. See here for more information on using character counter.

<label class="mdc-text-field">
  <span class="mdc-text-field__ripple"></span>
  <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id" maxlength="10">
  <span class="mdc-floating-label" id="my-label-id">My Label</span>
  <span class="mdc-line-ripple"></span>
</label>
<div class="mdc-text-field-helper-line">
  <div class="mdc-text-field-character-counter">0 / 10</div>
</div>

Multi-line Text Field (Textarea) with Character Counter

The layout structure of character counter for multi-line text field (textarea) is slightly different since it is rendered inside of text field component.

<label class="mdc-text-field mdc-text-field--textarea">
  <div class="mdc-text-field-character-counter">0 / 140</div>
  <textarea class="mdc-text-field__input" aria-labelledby="my-label-id" rows="8" cols="40" maxlength="140"></textarea>
  <span class="mdc-notched-outline">
    <span class="mdc-notched-outline__leading"></span>
    <span class="mdc-notched-outline__notch">
      <span class="mdc-floating-label" id="my-label-id">Textarea Label</span>
    </span>
    <span class="mdc-notched-outline__trailing"></span>
  </span>
</label>

Helper text and Character counter are optional subcomponents of text field that can co-exist independently. It is recommended that .mdc-text-field and .mdc-text-field-helper-line elements have same width for correct layout.

Text Field with Leading and Trailing Icons

Leading and trailing icons can be added within the default or outlined variant of MDC Text Field as visual indicators as well as interaction targets. See here for more information on using icons.

HTML5 Validation

MDCTextFieldFoundation provides validity styling by using the :invalid and :required attributes provided by HTML5's form validation API.

<label class="mdc-text-field">
  <span class="mdc-text-field__ripple"></span>
  <input class="mdc-text-field__input" type="password" aria-labelledby="my-label-id" required minlength="8">
  <span class="mdc-floating-label" id="my-label-id">Password</span>
  <span class="mdc-line-ripple"></span>
</label>

MDCTextFieldFoundation automatically appends an asterisk to the label text if the required attribute is set.

Pre-filled

When dealing with JS-driven text fields that already have values, you'll want to ensure that you render mdc-floating-label with the mdc-floating-label--float-above modifier class. This will ensure that the label moves out of the way of the text field's value and prevents a Flash Of Un-styled Content (FOUC).

<label class="mdc-text-field">
  <span class="mdc-text-field__ripple"></span>
  <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id" value="Pre-filled value">
  <span class="mdc-floating-label mdc-floating-label--float-above" id="my-label-id">
    Label in correct place
  </span>
  <span class="mdc-line-ripple"></span>
</label>

Style Customization

CSS Classes

CSS Class	Description
mdc-text-field	Mandatory.
mdc-text-field--outlined	Styles the text field as an outlined text field.
mdc-text-field--fullwidth	Styles the text field as a full width text field.
mdc-text-field--textarea	Indicates the text field is a <textarea>.
mdc-text-field--disabled	Styles the text field as a disabled text field.
mdc-text-field--dense	Styles the text field as a dense text field.*
mdc-text-field--with-leading-icon	Styles the text field as a text field with a leading icon.
mdc-text-field--with-trailing-icon	Styles the text field as a text field with a trailing icon.
mdc-text-field--focused	Styles the text field as a text field in focus.
mdc-text-field--no-label	Styles the text field that has no label.
mdc-text-field--end-aligned	Styles the text field with an end-aligned input.
mdc-text-field-helper-line	Styles the container of helper text and character counter elements.

Deprecation Notice

*The --dense variant of the text field will be removed in an upcoming release. See github issue for details.

Sass Mixins

To customize the colors of any part of the text-field, use the following mixins. We recommend you apply these mixins within CSS selectors like .foo-text-field:not(.mdc-text-field--focused) to select your unfocused text fields, and .foo-text-field.mdc-text-field--focused to select your focused text-fields. To change the invalid state of your text fields, apply these mixins with CSS selectors such as .foo-text-field.mdc-text-field--invalid.

NOTE: the mdc-line-ripple-color mixin should be applied from the not focused class foo-text-field:not(.mdc-text-field--focused)).

Mixins for all Text Fields

Mixin	Description
ink-color($color)	Customizes the color of the text entered into an enabled text field.
placeholder-color($color)	Customizes the color of the placeholder in an enabled text field.
disabled-ink-color($color)	Customizes the color of the entered text in a disabled text field.
disabled-placeholder-color($color)	Customizes the color of the placeholder in a disabled text field.
label-color($color)	Customizes the text color of the label in an enabled text field.
disabled-label-color($color)	Customizes the text color of the label in a disabled text field.
caret-color($color)	Customizes the color of the cursor caret of the text field.

Mixins for Filled Text Field and Textarea

Mixin	Description
fill-color($color)	Customizes the background color of the text field or textarea when enabled.
disabled-fill-color($color)	Customizes the background color of the text field or textarea when disabled.

Mixins for Filled Text Field Only

Mixin	Description
shape-radius($radius, $rtl-reflexive)	Sets rounded shape to boxed text field variant with given radius size. Set $rtl-reflexive to true to flip radius values in RTL context, defaults to false.
bottom-line-color($color)	Customizes the text field bottom line color.
hover-bottom-line-color($color)	Customizes the hover text field bottom line color.
disabled-bottom-line-color($color)	Customizes the disabled text field bottom line color.
line-ripple-color($color)	Customizes the color of the default line ripple of the text field.
density($density-scale)	Sets density scale for default text field variant. Supported density scale values -4, -3, -2, -1, 0.
height($height)	Sets height of default text field variant.

Mixins for Outlined Text Field and Textarea

Mixin	Description
focused-outline-color($color)	Customizes the outline border color when the text field or textarea is focused.
hover-outline-color($color)	Customizes the outline border color when the text field or textarea is hovered.
disabled-outline-color($color)	Customizes the outline border color when the text field or textarea is disabled.
outline-color($color)	Customizes the border color of the outlined text field or textarea.

Mixins for Outlined Text Field Only

Mixin	Description
outline-shape-radius($radius, $rtl-reflexive)	Sets rounded shape to outlined text field variant with given radius size. Set $rtl-reflexive to true to flip radius values in RTL context, defaults to false.
outlined-density($density-scale)	Sets density scale for outlined text field (Excluding outlined text field with leading icon). Supported density scale values -4, -3, -2, -1, 0.
outlined-height($height)	Sets height of outlined text field variant (Excluding outlined text field with leading icon).
outlined-with-leading-icon-density($density-scale)	Sets density scale for outlined text field with leading icon. Supported density scale values -4, -3, -2, -1, 0.
outlined-with-leading-icon-height($height)	Sets height of outlined text field with leading icon variant.

Mixins for Textarea Only

Mixin	Description
textarea-shape-radius($radius, $rtl-reflexive)	Sets rounded shape to text area variant with given radius size. Set $rtl-reflexive to true to flip radius values in RTL context, defaults to false.

MDCTextField Properties and Methods

Property	Value Type	Description
value	string	Proxies to the foundation's getValue/setValue methods.
disabled	boolean	Proxies to the foundation's isDisabled/setDisabled methods.
useNativeValidation	boolean (write-only)	Proxies to the foundation's setUseNativeValidation method.
valid	boolean	Proxies to the foundation's isValid/setValid methods.
helperTextContent	string (write-only)	Proxies to the foundation's setHelperTextContent method when set.
ripple	MDCRipple (write-only)	The MDCRipple instance for the root element that MDCTextField initializes; this only applies to the default Text Field, and is null for other variants.
leadingIconAriaLabel	string (write-only)	Proxies to the foundation's setLeadingIconAriaLabel method.
trailingIconAriaLabel	string (write-only)	Proxies to the foundation's setTrailingIconAriaLabel method.
leadingIconContent	string (write-only)	Proxies to the foundation's setLeadingIconContent method.
trailingIconContent	string (write-only)	Proxies to the foundation's setTrailingIconContent method.

In addition to the above, the following properties proxy to the input element's properties of the same name:

• required
• pattern
• minLength
• maxLength
• min
• max
• step

Method Signature	Description
focus() => void	Focuses the input or textarea element.
layout() => void	Adjusts the dimensions and positions for all sub-elements.

Usage Within Frameworks

If you are using a JavaScript framework, such as React or Angular, you can create a Text Field for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.

MDCTextFieldAdapter

Method Signature	Description
addClass(className: string) => void	Adds a class to the root element.
removeClass(className: string) => void	Removes a class from the root element.
hasClass(className: string) => boolean	Returns true if the root element contains the given class name.
registerTextFieldInteractionHandler(evtType: string, handler: EventListener) => void	Registers an event handler on the root element for a given event.
deregisterTextFieldInteractionHandler(evtType: string, handler: EventListener) => void	Deregisters an event handler on the root element for a given event.
registerInputInteractionHandler(evtType: string, handler: EventListener) => void	Registers an event listener on the native input element for a given event.
deregisterInputInteractionHandler(evtType: string, handler: EventListener) => void	Deregisters an event listener on the native input element for a given event.
registerValidationAttributeChangeHandler(handler: (attributeNames: string[]) => void) => MutationObserver	Registers a validation attribute change listener on the input element. Handler accepts list of attribute changes.
deregisterValidationAttributeChangeHandler(!MutationObserver) => void	Disconnects a validation attribute observer on the input element.
getNativeInput() => NativeInputType | null	Returns an object representing the native text input element, with a similar API shape. See types.ts.
isFocused() => boolean	Returns whether the input is focused.
shakeLabel(shouldShake: boolean) => void	Shakes the label to indicate an invalid input value.
floatLabel(shouldFloat: boolean) => void	Floats the label.
hasLabel() => boolean	Determines whether the text field has a label element.
getLabelWidth() => number	Returns the width of the label element in px.
activateLineRipple() => void	Activates the text field's line ripple sub-element.
deactivateLineRipple() => void	Deactivate the text field's line ripple sub-element.
setLineRippleTransformOrigin(normalizedX: number) => void	Sets the CSS transform-origin property to the given value on the text field's line ripple sub-element (if present).
hasOutline() => boolean	Determines whether the text field has an outline sub-element.
notchOutline(labelWidth: number) => void	Sets the width of the text field's notched outline sub-element.
closeOutline() => void	Closes the text field's notched outline sub-element.

MDCTextFieldAdapter.getNativeInput()

Returns an object representing the native text input element, with a similar API shape. We never alter the value within our code, however we do update the disabled property, so if you choose to duck-type the return value for this method in your implementation it's important to keep this in mind. Also note that this method can return null, which the foundation will handle gracefully.

MDCTextFieldAdapter.getIdleOutlineStyleValue(propertyName: string)

Returns the idle outline element's computed style value of the given css property propertyName. The vanilla implementation achieves this via getComputedStyle(...).getPropertyValue(propertyName).

MDCTextFieldFoundation

Property	Value Type	Description
shouldFloat	boolean (read-only)	Determines whether the label should float.
shouldShake	boolean (read-only)	Determines whether the label should shake.

Method Signature	Description
getValue() => string	Returns the input's value.
setValue(value: string)	Sets the input's value.
setUseNativeValidation(useNativeValidation: boolean)	Sets whether to check native HTML validity state (true, default) or custom validity state when updating styles (false).
setValid(isValid: boolean)	Sets custom validity and updates styles accordingly. Note that native validation will still be honored subsequently unless setUseNativeValidation(false) is also called.
isValid() => boolean	Returns the component's current validity state (either native or custom, depending on how setUseNativeValidation() was configured).
isDisabled() => boolean	Returns whether or not the input is disabled.
setDisabled(disabled: boolean) => void	Updates the input's disabled state.
handleTextFieldInteraction(evt: Event) => void	Handles click and keydown events originating from inside the Text Field component.
handleInput() => void	Handles text input and textarea input event.
handleValidationAttributeChange(attributesList: !Array<string>) => void	Handles validation attribute changes.
activateFocus() => void	Activates the focus state of the Text Field. Normally called in response to the input focus event.
deactivateFocus() => void	Deactivates the focus state of the Text Field. Normally called in response to the input blur event.
setHelperTextContent(content: string) => void	Sets the content of the helper text.
setLeadingIconAriaLabel(label: string) => void	Sets the aria label of the leading icon.
setLeadingIconContent(content: string) => void	Sets the text content of the leading icon.
setTrailingIconAriaLabel(label: string) => void	Sets the aria label of the trailing icon.
setTrailingIconContent(content: string) => void	Sets the text content of the trailing icon.
notchOutline(openNotch: boolean) => void	Opens/closes the notched outline.
setTransformOrigin(evt: TouchEvent | MouseEvent) => void	Sets the line ripple's transform origin, so that the line ripple activate animation will animate out from the user's click location.
autoCompleteFocus() => void	Activates the Text Field's focus state in cases when the input value is changed programmatically (i.e., without user action).

MDCTextFieldFoundation supports multiple optional sub-elements: helper text and icon. The foundations of these sub-elements must be passed in as constructor arguments to MDCTextFieldFoundation.

Changelog

6.0.0 (2020-04-22)

Bug Fixes

• auto-init: Fixed issue with multiple default exports (#5464) (8ddd5c6)
• button: Fix outline & ink color according to spec guidance (#5268) (ee1a68c)
• button: Fixed parameter default value in height mixin (#5244) (b0cecf1)
• checkbox: change checkbox event type from change to click and add some logic for IE browser (#5316) (2e491de), closes #4893
• checkbox: Disabled state colors in IE11 high contrast mode (#5263) (d6a1d4b)
• checkbox: Replace unique-id with custom color hash functio… (#5404) (7be9e4a)
• checkbox: update disabled color values (#5209) (821871e)
• checkbox: Use secondary and on-secondary as default colors (b95172e), closes #5730
• chips: .d.ts file generated with syntax error (d154836)
• chips: .d.ts file generated with syntax error (#5577) (98f7faa)
• chips: Do not throw error if chip set becomes empty (#5290) (f978109)
• chips: Fix browser back nav in FF when removing chip with… (#5537) (a1a0deb)
• chips: Handle IE/Edge specific key names in keyboard navigation logic (3657f88)
• chips: Move touch target inside primary action (ad3bbf7)
• circular-progress: Add .npmignore file to ignore typescript files when publishing (#5801) (f172b0f), closes #5800
• circular-progress: fix determinate transition typo & 4 color keyframes (a301636)
• circular-progress: Fix naming in package.json and add to jsBundleFactory (86f7cad)
• circular-progress: Force LTR layout (6a40ef2)
• circular-progress: Switch mixins import to [@use](https://github.com/use) (098ae32)
• core: Fix canary release by excluding test files from default tsconfig (#5317) (c916008)
• data-table: change svg attribute name viewbox to viewBox (#5483) (#5493) (f3adce8)
• data-table: Fix pagination box height (eb28b6e)
• data-table: Fixed default feature targeting query params of sort mixins (e33c49e)
• data-table: Hover styles for sortable header cell (d580805)
• data-table: Reverse the arrow direction icon for column sorting (a7c827f)
• data-table: unable to redefine colors in class-based themi… (#5751) (4d48051)
• data-table: unable to redefine colors in class-based theming (4b45b66)
• dialog: Move aria roles from dialog root to dialog surface… (#5239) (c704b71)
• elevation: Update overlay color mixin (#5331) (b723dfa)
• fab: Add missing dep to fab package.json. (#5236) (e0f6fd9)
• fab: Add overflow: visible to make touch target visible in… (#5241) (5850080)
• fab: Adjust fab line-height (#5254) (525989b)
• fab: Adjust fab line-height to center text (#5258) (591a6ad)
• floatinglabel: Estimate hidden scroll width (#5448) (981ec9b)
• linear-progress: Temporary rollback of #5656 while updating downstream dependencies (9cf5e98)
• linear-progress: support aria attributes (#5248) (7084b40), closes #5248
• list: Ensure disabled colors apply to primary and secondary text (#5322) (878a08b)
• list: No longer emits action event when disabled item selected (f352d03), closes #5571
• menu-surface: Use margin_to_edge as a viewport margin in calculations for autopositioning. (4b04cdb)
• menusurface: open and closed events not fired when already opened or closed (9cff431)
• menusurface: synchronous quick menu does not close on button click (45a6615)
• notched-outline: Restore component test (#5449) (4269133)
• radio: update disabled color values (#5210) (491fddc)
• select: Deduplicate change events (4ad1274), closes #5570
• select: Do not fire change event on programmatic change (#5255) (ec72968)
• select: Fix notch outline width when floating (#5319) (1c494e5)
• slider: slider track not visible (#5512) (f2426d2)
• slider: two change events fired on each up (d10412c)
• slider: use secondary custom property color for slider container (#5132) (aa8e43e)
• slider: Visual bug when slider value is displayed as "-0" (3fc3ab5)
• snackbar: add explicit width for label to wrap in ie11 (#5497) (cd49033)
• snackbar: adjust mixins to meet spec (#5477) (f16f15b)
• switch: add transform transition to switch control to avoid overflow-x issues (8c11ea2)
• switch: always set track to transparent border (9a169f4)
• switch: fix strict generic checks (7f5e0c2)
• switch: handle aria-checked correctly. (#5202) (#5357) (d245a1a)
• switch: set track border to be transparent (#5323) (397905b)
• switch: use CSS custom properties for theming (d6315ef)
• testing: Revert change from #5299. (#5324) (5fb62be)
• textfield: add placeholder mixins and fix disabled colors (#5360) (0a40ced)
• textfield: add separate classes for leading/trailing icons (#5367) (70c708d)
• textfield: change root element to <label> (#5439) (d8d9502)
• textfield: clean up input padding (8639c26)
• textfield: hide filled-variant floating label at <52px (#5553) (5ff3380)
• textfield: IE11 label overlapping placeholder (781434a)
• textfield: incorrect mixin forward path (#5554) (3e782d8)
• textfield: move ripple to separate element (c541ebe)
• textfield: outlined trailing icon's position (#5496) (93e2288)
• textfield: prevent placeholder styles from collapsing with minifiers (d07c78d)
• add missing SASS dependencies (#5337) (d2ae6e1)
• textfield: remove absolute positioning from icons (1e13d1d)
• textfield: remove deprecated dense variant in favor of density (776291e), closes #4142
• textfield: use correct disabled colors for IE11 high contrast (5353985)
• Remove edge detection for CSS custom properties (#5264) (fe444ac)
• server-side rendering errors in linear progress and slider (7d0b983)

Code Refactoring

• migrate to the Sass module system (#5453) (faa9af3)
• grid-list: Deprecate component (#5499) (cf33f11)
• linear-progress: Restructure buffer DOM to allow translucent buffer (98b8434)
• linear-progress: Restructure buffer DOM to allow translucent buffer (9372e49)
• select: Fix alignment issues, upgrade anchor to interactive element (28d10a9), closes #5428
• touchtarget: Rename mdc-touch-target-component => mdc… (#5245) (afe0dd1)

Features

• button: Add disabled state color mixins (#5232) (b5eb51e)
• button: Add overflow ellipsis mixin (#5352) (47949b0)
• button: Expand outlined touch target to include side borders (ce6cb70)
• button: Setup elevation overlay (#5256) (3cbee6d)
• card: Add elevation overlay structure (#5282) (aa0eba4)
• checkbox: Add support for checkbox CSS-only indeterminate checkbox (b273afa)
• chips: Add chips styling (1db5c9f)
• chips: Add elevation overlay structure (#5279) (3e560b3)
• chips: Add focus{in|out} handlers (10af6cf)
• chips: Add keyCode support (82fa986)
• chips: Add trailing action feature targeting test (bec0659)
• chips: Announce when chips are removed (b3f70eb)
• chips: Consolidate interaction event handlers (#5251) (5729943)
• chips: Create trailing action business logic (9ebee4c)
• chips: Expose trailing action chip files (6b48781)
• chips: Restructure trailing action mixins (05f5e15)
• circular-progress: Add foundation methods to get isDeterminate and progress value (7d8f9c8)
• circular-progress: Add Sass styles and tests (bd33cb5)
• circular-progress: Add TS for foundation, adapter, component with tests (548b1d4)
• data-table: Add base styles to support pagination. (927fa90)
• data-table: Add foundation methods to support loading state. (e75deb8)
• data-table: Added styles for table in loading state (35a32aa)
• data-table: Added styles to support column sorting. (17b9699)
• data-table: Foundation changes to support column sorting (6ee0355)
• data-table: Set progress indicator styles based on table body height (c026422)
• dialog: Add elevation overlay structure (#5283) (b8bc4a2)
• dom: Add focus trap utility. (#5505) (63f357d)
• dom: Add keyboard support (5f24faa)
• dom: Create announcer utility (32c1df1)
• elevation: Add elevation overlay mixins (#5249) (b4cfdc4)
• elevation: Update elevation mixins (#5304) (ba879b6)
• fab: Add elevation overlay structure (#5278) (e89750d)
• fab: Add outline in high-contrast mode (deda86d)
• fab: Add support for increased touch target to mini FAB. (#5231) (0c4d8f3)
• floating-label: add feature targeting for styles (#5287) (b240bcc)
• form-field: Add support for space-between (e84b9c8), closes #5747
• formfield: add nowrap class/prop to MDC/MWC (c4b4bba)
• icon-button: Add disabled state color mixins (#5246) (7161170)
• iconbutton: Add icon button variant which supports toggling aria label. (f838c6e)
• line-ripple: add active/inactive states to line-ripple (b6c7f62)
• line-ripple: add feature targeting for styles (#5292) (391674a)
• linear-progress: Add foundation methods to fetch progress and determinate state. (4dc45af)
• menu: Add elevation overlay structure (#5280) (7fd17ce)
• menu: Add mixin to flatten menu top when opened-below anchor (1e17c49)
• menu-surface: Add support for flipping menu corner horizontally. (7b44824)
• notched-outline: add feature targeting for styles (#5289) (c483774)
• progress-indicator: Add common interface for progress indicators (#5564) (ea863cb)
• ripple: Reorganize ripple opacities (008c4d3)
• switch: Add elevation overlay structure (#5281) (50f110a)
• switch: Restructure DOM (#5312) (0ec1fab)
• text-field: Add disabled state color mixins (#5208) (66299b6)
• text-field: add feature targeting for styles (#5378) (e8a9936)
• text-field: Truncate floating label width w/ icons (c141801)
• textfield: add end-alignment (#5356) (847dd1a)
• textfield: add filled class variant (b70bc60)
• textfield: add forced LTR input (490fbdc)
• textfield: add prefix and suffix (6601d24), closes #1892
• Add index stylesheets to each MDC Web package (#5539) (1814866)
• Add index stylesheets to mdc-image-list and mdc-layout-gr… (#5546) (3a85313)
• Use @use syntax in material-components-web Sass file and… (#5573) (b4727e4)
• textfield: add specific label-floating class (a88c8e4)
• textfield: allow character counter to be moved outside of the textarea. (84e7ed5)
• textfield: Create float transition mixin (ca61b65)
• textfield: Limit notched outline max-width (0ab62a6)
• typography: add container baseline mixins for flexbox (69edc6e)

Reverts

• Revert "feat(switch): Add elevation overlay structure (#5281)" (#5329) (1fbf5bd), closes #5281 #5329
• "fix(checkbox): change checkbox event type from change to click and add some logic for IE browser" (ba30399)
• feat(chips): Consolidate interaction event handlers (#5251) (#5301) (5e45d77)
• fix(chips): Do not throw error if chip set becomes empty (#5300) (d10e8cd)
• fix(select): Do not fire change event on programmatic change (#5255) (#5302) (ad9dfe7)

BREAKING CHANGES

• select: HTML Markup significantly changed, see README; REMOVED adapter methods isSelectedTextFocused, getSelectedTextAttr, setSelectedTextAttr; ADDED adapter methods isSelectAnchorFocused, getSelectAnchorAttr, setSelectAnchorAttr; removed variables outlined-dense-label-position-y, icon-padding; added variables minimum-height-for-filled-label, filled-baseline-top, selected-text-height, anchor-padding-left, anchor-padding-left-with-leading-icon, anchor-padding-right.

• text-field: Redundant mixins mdc-text-field-textarea-fill-color, mdc-text-field-textarea-stroke-color, mdc-text-field-fullwidth-bottom-line-color removed. Instead, use mdc-text-field-fill-color, mdc-text-field-outline-color, and mdc-text-field-bottom-line-color respectively to achieve the same effect.

• textfield: mdc-text-field--dense and associated mixins/variables have been removed. Use the density() mixin instead.

• textfield: removed the following variables: $input-padding, $input-padding-top, $input-padding-bottom, $outlined-input-padding-top, $outlined-input-padding-bottom, $input-border-bottom

• linear-progress: DOM for linear progress buffer changed. MDCLinearProgressAdapter method getBuffer, getPrimaryBar, setStyle removed. MDCLinearProgressAdapter method setBufferBarStyle, setPrimaryBarStyle added.

• linear-progress: DOM for linear progress buffer changed. MDCLinearProgressAdapter method getBuffer, getPrimaryBar, setStyle removed. MDCLinearProgressAdapter method setBufferBarStyle, setPrimaryBarStyle added.

• typography: typography.baseline-top() and typography.baseline-bottom() are now private. Use typography.baseline() for containers and typography.text-baseline() for text with $top and $bottom params.

• chips: The touch target and text now appear inside the primary action element. Please see the readme for markup changes.

• textfield: filled text fields must include a <div class="mdc-text-field__ripple"></div>

• textfield: Filled textfields will no longer show a floating label at certain densities. This can be overridden by setting $mdc-text-field-minimum-height-for-filled-label: 40px

• chips: Both MDCChipAdapter and MDCChipSetAdapter have new methods. MDCChipSetFoundation event handlers now accept the corresponding chip event detail interface as the sole argument. The root property has been removed from the MDCChipRemovalEventDetail interface.

• line-ripple: mdc-line-ripple-color() mixin has been renamed to mdc-line-ripple-active-color()

• textfield: Default textfields must now specify mdc-text-field--filled. Disabled outlined textfields no longer have a shaded background. Height mixin no longer specifies a baseline override, use typography's baseline-top mixin.

• Four variables and a mixin in mdc-textfield were renamed to use a mdc-text-field- prefix when depended on via @import (formerly mdc-required-text-field-label-asterisk_, now required-label-asterisk_).

• textfield: icons must use .mdc-text-field__icon--leading or .mdc-text-field__icon--trailing classes. mdc-text-field-icon-color() mixin has been split into mdc-text-field-leading-icon-color() and mdc-text-field-trailing-icon-color().

• switch: Added setNativeControlAttr method in mdc-switch adapter.

• checkbox: remove event listener for 'change' and add event listener for 'click'.

• Add handleClick() method in foundation to handle click event.
• Add setCheck() method into component to change check status.

• switch: Switch DOM structure has changed. See switch README for details
• button: Variable $mdc-button-disabled-container-fill-color renamed to $mdc-button-disabled-container-color.
• Removed $edgeOptOut option from mdc-theme-prop() Sass mixin.
• chips: the handleInteraction and handleTrailingIconInteraction handlers have been removed from the MDCChipFoundation. The handleClick handler has been added to the MDCChipFoundation
• Adds new adapter methods to MDCLinearProgressAdapter.
• elevation: Functions moved into the _functions.scss file
• touchtarget: Renames mixin from mdc-touch-target-component => mdc-touch-target-margin
• grid-list: Per the deprecation notice for grid-list, this component has been removed from MDC-Web. Some of its functionalities are available in the MDC Image List package instead. It is recommended that you migrate to the mdc-image-list package to continue to receive new features and updates.